<template>
	<div class="app-container" :style="{height:cheight-90+'px'}">

		<baidu-map MapType="BMAP_SATELLITE_MAP" @zoomend="zoomend" @dragend="dragend" @moveend="moveend" class="map"
			:center="center" :zoom='zoom' :min-zoom='minzoom' :max-zoom="maxzoom" :scroll-wheel-zoom='true'
			style="width: 100%;height: 60%;">
			<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" @changeBefore="changeBefore" @changeAfter="changeAfter">
			</bm-city-list>
			<bm-boundary :name="havename" v-if="showha" :strokeWeight="2" strokeColor="blue"></bm-boundary>
			<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
			</bm-geolocation>
			<block v-if="bover">
				<my-overlay :city="city" :type="0" v-for="(item,index) in clists" :key="item.id" :id="item.id"
					:position="item.piont" :text="item.name+item.num+'个'" :active="item.oactive"
					@mouseover.native="over(item)" @handleClicks="handleClicks" @mouseleave.native="leave(item)">
				</my-overlay>
			</block>
			<block v-else>
				<my-overlay :type="1" :soc="item.batStatus" v-for="(item,index) in datalist" :key="index" :id="item.id"
					:position="item.piont" :text="item.name" :active="item.oactive" @mouseover.native="overs(item,0)"
					@handleClicks="handleClicks" @mouseleave.native="leaves(item,0)">
				</my-overlay>
				<!-- <my-overlay :type="2" :soc="0" v-for="(item,index) in datalist1" :key="item.devId" :id="item.id"
					:position="item.piont" :text="item.name" :active="item.oactive" @mouseover.native="overs(item,1)"
					@handleClicks="handleClicks" @mouseleave.native="leaves(item,1)">
				</my-overlay> -->
				<!-- <my-overlay :type="3" v-for="(item,index) in datalist2" :key="item.id" :id="item.id"
					:position="item.piont" :text="item.name" :active="item.oactive" @mouseover.native="overs(item)"
					@handleClicks="handleClicks" @mouseleave.native="leaves(item)">
				</my-overlay> -->
			</block>


		</baidu-map>
		<el-row style="height: 40%;width: 100%;">
			<el-col :span="12">
				<vxe-table show-overflow :column-config="{resizable: true}" height="240px" :pageParam="loading"
					:data="tableDatas.list" size="mini" border stripe>
					<vxe-column type="seq" title="序号" width="60"></vxe-column>
					<vxe-column field="t1" title="收运单位名称"></vxe-column>
					<vxe-column field="t2" title="已收"></vxe-column>
					<vxe-column field="t3" title="未收"></vxe-column>
					<vxe-column field="t4" title="日总收集量"></vxe-column>
				</vxe-table>
				<vxe-pager background size="small" stripe :loading="loading" :current-page="pageParam.pageNo"
					:page-size="pageParam.pageSize" :total="tableDatas.totalRow"
					:page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@size-change="handleSizeChange" background class="page-wrapper"
					@current-change="handleCurrentChange">
				</vxe-pager>
			</el-col>
			<el-col :span="12">
				<vxe-table show-overflow :column-config="{resizable: true}" height="240px" :loading="loading"
					:data="tableDatas1.list" size="mini" border stripe>
					<vxe-column type="seq" title="序号" width="60"></vxe-column>
					<vxe-column field="t1" title="车牌号"></vxe-column>
					<vxe-column field="t2" title="已收"></vxe-column>
					<vxe-column field="t3" title="未收"></vxe-column>
					<vxe-column field="t4" title="日总收集量"></vxe-column>
				</vxe-table>
				<vxe-pager background size="small" stripe :loading="loading" :current-page="pageParam.pageNo"
					:page-size="pageParam.pageSize" :total="tableDatas1.totalRow"
					:page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@size-change="handleSizeChange" background class="page-wrapper"
					@current-change="handleCurrentChange">
				</vxe-pager>
			</el-col>
		</el-row>
		<!-- 抽屉信息 -->
		<el-drawer :title="drawer.title" :modal="false" :visible.sync="drawer.drawer" direction="rtl"
			:before-close="handleClose">

			<div class="dras">
				<el-image :src="showimg" fit="contain" lazy style="width: 90%;height: 200px; margin-bottom:1rem">
				</el-image>
				<vxe-table style="width: 100%;" border size="mini" :max-height="cheight-200+'px'"
					:row-config="{isHover: true}" :data="tableData">
					<vxe-column field="date" title="属性" sortable></vxe-column>
					<vxe-column field="name" title="值" sortable></vxe-column>
				</vxe-table>
			</div>
		</el-drawer>
		<vxe-modal v-model="dialogVisible" @close="handleCloses" title="实时信息" :z-index="9999" width="100%" height="100%"
			show-zoom resize remember>
			<addedit ref="addEdit" :batNos="adsbatno" :height="cheight-200" />
		</vxe-modal>
		<!-- <el-dialog title="实时信息" :visible.sync="dialogVisible" width="100%" :before-close="handleClose">
			<addedit :height="cheight-200"></addedit>
		</el-dialog> -->
		<batlist ref="batlist" @selebatno="selebatno" />
		//
		<actlist ref="actlist" @selact="selact" />
		<!-- 换电站详细 -->
		<!-- <detail ref="detail" /> -->
	</div>
</template>

<script>
	import MyOverlay from './components/MyOverlay.vue'
	import axios from 'axios'
	import addedit from '../capacity/add_edit.vue'
	import batlist from '../capacity/bat_list.vue'
	//import actlist from '../pstation/act_list.vue'
	import BarChart from './dashboard/BarChart'
	// import detail from './detail.vue'
	import datajson from '@/views/util/data.json'
	import {
		BmlMarkerClusterer
	} from 'vue-baidu-map'
	import {
		selectbatgps,
		selectLoca,
		selectBatStatus,
		getPowerStationData,
		selectLocationPsNum
	} from '@/views/dashboard/req.js'
	export default {
		data() {

			return {
				showimg: datajson.prolist[0].t24,
				tableData: [{
					date: '产生单位名称',
					name: ''
				}, {
					date: '产生单位地址',
					name: '',
				}, {
					date: '产生单位负责人',
					name: ''
				}, {
					date: '产生单位联系电话',
					name: '',
				}, {
					date: '区域',
					name: ''
				}, {
					date: '产生单位经纬度',
					name: '',
				}, {
					date: '签约状态',
					name: ''
				}, {
					date: '签约时间',
					name: '',
				}, {
					date: '合同期限',
					name: '',
				}, {
					date: '履行情况',
					name: '',
				}, {
					date: '收运单位名称',
					name: '',
				}, {
					date: '今日总量',
					name: '',
				}, {
					date: '已收',
					name: '',
				}, {
					date: '未收',
					name: '',
				}],
				tableDatas: {
					totalRow: 0,
					list: []
				},
				tableDatas1: {
					totalRow: 0,
					list: []
				},
				pageParam: {
					batNo: '', //电池包号
					pageIndex: 1,
					pageSize: 20,
					typeList: ['0', '1', '2', '3', '4'],
					beginTime: '',
					endTime: '',
				},
				loading: false,
				batNo: '',
				adsbatno: '',
				dialogVisible: false,
				input1: '',
				input2: '',
				input3: '',
				select: '1',
				newcode: '100000', //当前行政编码
				clists: [],
				datalist: [],
				datalist1: [],
				datalist2: [{
						id: 1,
						oactive: false,
						name: '车辆:1222',
						piont: {
							lng: 119.991384,
							lat: 31.745796
						}
					},
					{
						id: 2,
						oactive: false,
						name: '车辆：2332',
						piont: {
							lng: 119.991384,
							lat: 31.835796
						}
					},
					{
						id: 3,
						oactive: false,
						name: '车辆：3333',
						piont: {
							lng: 119.891384,
							lat: 31.875796
						}
					},
					{
						id: 4,
						oactive: false,
						name: '车辆4',
						piont: {
							lng: 119.982484,
							lat: 31.853796
						}
					},
					{
						id: 5,
						oactive: false,
						name: '车辆5',
						piont: {
							lng: 119.695384,
							lat: 31.725796
						}
					}
				],
				activeName: 'tl1',
				showha: false, //是否显示区域轮廓
				havename: '', //显示区域的名称
				markers: [],
				center: '全国',
				centerpoint: {
					lat: '',
					lng: ''
				},
				zoom: 5,
				minzoom: 5,
				maxzoom: 50,
				bover: true,
				drawer: {
					title: '',
					drawer: false
				},
				cheight: document.documentElement.clientHeight,
				provinceList: [], //省级数量province/num
				cityList: [], //市级数量city/num
				districtList: [], //区级数量district/num
				streetList: [], //街道数据量street/num
				showdata: {
					"chargingNum": 0,
					"totalNum": 0,
					"alarmNum": 0,
					"batStationNum": 0,
					"unconnect": 0
				}, //电池包数量
				street: '',
				batId: '',
				alternate1: '',
				station: {
					total: 0
				},
				ind: 0,
				bal: {},
			}
		},
		components: {
			BmlMarkerClusterer,
			MyOverlay,
			batlist,
			BarChart,
			addedit,
			//actlist,
			// detail
		},
		created() {
			this.city = '';
			this.seleloc();
			this.getGeoJson(this.newcode); //默认全国
		},
		mounted() {
			//console.log("页面加载》》》", this.$route.params);
			let code = this.$route.params.citycode;
			if (code) {
				this.zoom = 11;
				this.center = this.$route.params.name;
				this.city = this.$route.params.name;
				this.seleloc();
				this.getGeoJson(code); //默认全国
			} else {
				this.city = '';
				this.seleloc();
				this.getGeoJson(this.newcode); //默认全国
			}
			this.seleb();

		},
		methods: {
			handler({
				BMap,
				map
			}) {

				map.addEventListener('click', function(e) { // 点击地点获取经纬度
					console.log(e.point.lng, e.point.lat)
				})
			},
			async seleb() {
				let parm = {
					batModelId: '',
					batNo: '',
					batTypeId: '',
					operationDepartment: ''
				}
				let result = await selectBatStatus(parm);
				this.showdata = result;
				this.showdata = {
					"chargingNum": result.chargingErrorNum + result.chargingNormalNum,
					"totalNum": result.totalNum,
					"alarmNum": result.chargingErrorNum + result.disChargingErrorNum + result.offLineErrorNum,
					"batStationNum": result.disChargingNormalNum,
					"unconnect": result.unConnectedNum
				}
			},
			handleSizeChange(val) {
				this.pageParam.pageIndex = 1;
				this.pageParam.pageSize = val;
			},
			handleCurrentChange(val) {
				this.pageParam.pageIndex = val;
			},
			//获取数据
			async seleloc() {
				//console.log("城市", this.city);

				let that = this;
				that.tableDatas.totalRow = datajson.zjlist1.length;
				that.tableDatas.list = datajson.zjlist1;
				that.tableDatas1.totalRow = datajson.zjlist1s.length;
				that.tableDatas1.list = datajson.zjlist1s;
				let parm = {
					batModelId: '',
					batNo: '',
					batTypeId: '',
					city: that.city,
					operationDepartment: ''
				}
				// that.provinceList= [];//省级数量province/num
				// that.cityList= []; //市级数量city/num
				// that.districtList= []; //区级数量district/num
				// that.streetList= []; //街道数据量street/num
				let result = await selectLoca(parm);
				// if(that.select==2){
				// 	
				// }
				let results = await selectLocationPsNum({});
				that.station.total = 0;
				if (results.provinceList) {
					results.provinceList.forEach(item => {
						that.station.total += item.num;
					})
				}

				if (result.districtList) {
					that.districtList = result.districtList;
					that.districtList.forEach((item, index) => {
						let cname = item.district
						item.name = cname;
						item.id = index;
						item.oactive = false;
						item.piont = {
							lng: item.lng,
							lat: item.lat
						}
					})
				}
				if (result.provinceList) {
					that.provinceList = result.provinceList;
					that.provinceList.forEach((item, index) => {
						let cname = item.province
						switch (cname) {
							case '内蒙古自治区':
								cname = "内蒙古"
								break;
							case '西藏自治区':
								cname = "西藏"
								break;
							case '新疆维吾尔自治区':
								cname = "新疆"
								break;
							case '宁夏回族自治区':
								cname = "宁夏"
								break;
							case '广西壮族自治区':
								cname = "广西"
								break;
							case '香港特别行政区':
								cname = "香港"
								break;
							case '澳门特别行政区':
								cname = "澳门"
								break;
							default:
								break;
						}
						item.name = cname;
						item.id = index;
						item.oactive = false;
						item.piont = {
							lng: item.lng,
							lat: item.lat
						}
					})
				}
				if (result.cityList) {
					that.cityList = result.cityList;
					that.cityList.forEach((item, index) => {
						let cname = item.city
						item.name = cname;
						item.id = index;
						item.oactive = false;
						item.piont = {
							lng: item.lng,
							lat: item.lat
						}
					})
				}
				if (result.streetList) {
					that.streetList = result.streetList;
					that.streetList.forEach((item, index) => {
						let cname = item.street
						item.name = cname;
						item.id = index;
						item.oactive = false;
						item.piont = {
							lng: item.lng,
							lat: item.lat
						}
					})
				}

			},
			//电池包坐标
			async selectbatgps(i) {
				let that = this;
				that.datalist = [];
				that.datalist1 = [];
				let parm = {
					batModelId: '',
					batNo: that.batNo,
					batTypeId: '',
					city: that.city,
					clat: that.centerpoint.lat,
					clng: that.centerpoint.lng,
					district: that.district,
					street: that.street,
					operationDepartment: ''
				}
				if (i == 0) {
					parm = {
						batModelId: '',
						batNo: that.batNo,
						batTypeId: '',
						city: that.city,
						district: that.district,
						street: that.street,
						operationDepartment: ''
					}
				}
				let result = await selectLoca(parm);
				let results = await selectLocationPsNum(parm);
				result.gpsList.forEach(item => {
					// let alternate1 = item.alternate1;
					// let salternate1 = alternate1.split(",")[9];
					// alternate1.split(",").forEach((items,ind)=>{
					// 	if(ind<=4){
					// 		if(items!=0){
					// 			salternate1="故障";
					// 		}
					// 	}
					// })
					// item.alternate1 = salternate1;
					let parms = item;
					parms.oactive = false;
					parms.name = "产生单位:" + item.batNo
					parms.piont = {
						lng: item.pointJ,
						lat: item.pointW
					}
					that.datalist.push(parms);
				})
				results.gpsList.forEach(item => {
					let parms = item;
					parms.oactive = false;
					parms.name = item.name;
					parms.piont = {
						lng: item.pointJ,
						lat: item.pointW
					}
					that.datalist1.push(parms);
				})

				if (result.clat) {
					that.center = {
						lat: result.clat,
						lng: result.clng
					};
					that.street = '';
				}

			},
			openbat() {
				// if(this.select==1){
				// 	this.$refs.batlist.open();
				// }else{
				// 	this.$refs.actlist.open();
				// }

			},
			//选择
			selebatno(e) {
				console.log(e);
				this.input3 = e.batNo;
				this.batId = e.id;
				setTimeout(() => {
					this.selectbat();
				}, 500)
			},
			selact(e) {
				this.input3 = e.devId;
				this.batId = e.id;
				setTimeout(() => {
					this.selectbat();
				}, 500)
			},
			//搜索电池
			async selectbat() {
				let that = this;
				that.datalist = [];
				that.datalist1 = [];
				let parm = {
					batModelId: '',
					batId: that.batId,
					batNo: that.input3,
					batTypeId: '',
					city: that.city,
					district: that.district,
					operationDepartment: ''
				}
				if (that.select == 2) {
					parm = {
						devId: that.input3,
						city: that.city
					}
					let result = await selectLocationPsNum(parm);
					result.gpsList.forEach(item => {
						let parms = item;
						parms.oactive = false;
						parms.name = item.name
						parms.piont = {
							lng: item.pointJ,
							lat: item.pointW
						}
						that.datalist1.push(parms);
						that.zoom = 16;
						that.center = parms.piont;
					})
				} else {
					let result = await selectLoca(parm);
					result.gpsList.forEach(item => {
						let parms = item;
						parms.oactive = false;
						parms.name = "产生单位:" + item.batNo
						parms.piont = {
							lng: item.pointJ,
							lat: item.pointW
						}
						that.datalist.push(parms);
						that.zoom = 16;
						that.center = parms.piont;
					})
				}
				console.log(that.datalist1, that.datalist);
			},
			//弹框
			showmode() {
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.$refs.addEdit.opens(this.adsbatno);
				})
			},
			//换电站
			showmodes(noid) {
				this.dialogVisible = true;
				this.$nextTick(() => {
					this.$refs.addEdit.opens(noid);
				})
			},
			//换电站详情
			showmodestion() {
				//this.$refs.detail.opens(this.bal);
			},
			handleCloses() {
				this.dialogVisible = false;
				this.$refs.addEdit.beforeDestroys();
			},
			//搜索切换
			selectchange(e) {
				this.select = e;
				this.seleloc();
			},
			//根据行政编码查询
			getGeoJson(adcode) {
				let that = this;
				that.clists = [];
				let newzoom = that.zoom
				if (newzoom < 7) {
					that.clists = that.provinceList;
				} else if (newzoom >= 7 && newzoom < 11) {
					that.clists = that.cityList;
				} else if (newzoom >= 11 && newzoom < 13) {
					that.clists = that.districtList
				} else {
					that.clists = that.streetList
				}
				console.log(that.clists);
			},
			//获取点击
			handleClicks(e) {
				console.log(e);
				let that = this;
				this.clists.forEach(item => {
					if (item.id == e.id) {
						this.center = item.piont;
						this.leave(item);
					}
				});
				that.ind = e.ind;
				if (e.ind == 0) {
					let newzoom = this.zoom;
					if (newzoom < 7) {
						this.zoom = 7;
					} else if (newzoom >= 7 && newzoom < 11) {
						this.zoom = 11;
					} else if (newzoom >= 11 && newzoom < 13) {
						this.zoom = 13;
					} else if (newzoom >= 13 && newzoom < 15) {
						if (this.streetList[e.id]) {
							this.street = this.streetList[e.id].name;
							this.selectbatgps(0);
						}
						this.zoom = 15;
					} else {
						//this.zoom = 13;
						this.bover = false;
						this.showha = false; //是否显示区域轮廓

						this.selectbatgps(1);
					}


				} else if (e.ind == 1) {
					that.tableData[0].name = datajson.prolist[0].t1;
					that.tableData[1].name = datajson.prolist[0].t2;
					that.tableData[2].name = datajson.prolist[0].t3;
					that.tableData[3].name = datajson.prolist[0].t4;
					that.tableData[4].name = datajson.prolist[0].t5;
					that.tableData[5].name = datajson.prolist[0].t6;
					that.tableData[6].name = datajson.prolist[0].t7;
					that.tableData[7].name = datajson.prolist[0].t8;
					that.tableData[8].name = datajson.prolist[0].t9;
					that.tableData[9].name = datajson.prolist[0].t10;
					that.tableData[10].name = datajson.prolist[0].t11;
					that.tableData[11].name = datajson.prolist[0].t12;
					that.tableData[12].name = datajson.prolist[0].t13;
					that.tableData[13].name = datajson.prolist[0].t14;
					this.datalist.forEach(item => {
						if (item.id == e.id) {
							this.center = item.piont;
							this.drawer = {
								title: item.name,
								drawer: true
							}
							console.log(item);
							//列表
							that.adsbatno = item.batNo;
							// that.tableData[0].name = typeof(item.batNo) == "undefined" ? '-' : item.batNo;
							// that.tableData[1].name = typeof(item.deviceNo) == "undefined" ? '-' : item.deviceNo;
							// that.tableData[2].name = typeof(item.soc) == "undefined" ? '-' : item.soc;
							// //let alternate1 = typeof(item.alternate1) == "undefined" ? '0,0,0,0,0,4G关闭,母线关,强制关过放,报警关,放电' : item.alternate1;
							// let salternate1 = "正常";
							// let stat = typeof(item.batStatus) == "undefined" ? 0 : item.batStatus;
							// switch (stat) {
							// 	case 0:
							// 		salternate1 = "正常";
							// 		break;
							// 	case 1:
							// 		salternate1 = "故障";
							// 		break;
							// 	case 2:
							// 		salternate1 = "离线";
							// 		break;
							// 	case 3:
							// 		salternate1 = "充电";
							// 		break;
							// }
							// that.tableData[3].name = salternate1;
							// that.tableData[4].name = typeof(item.batV) == "undefined" ? '-' : item.batV + "V";
							// that.tableData[5].name = typeof(item.batCur) == "undefined" ? '-' : item.batCur + "A";
							// that.tableData[6].name = typeof(item.temp) == "undefined" ? '-' : item.temp + "℃";
							// that.tableData[7].name = typeof(item.province) == "undefined" ? '-' : item.province;
							// that.tableData[8].name = typeof(item.city) == "undefined" ? '-' : item.city;
							// that.tableData[9].name = typeof(item.district) == "undefined" ? '-' : item.district;
							// that.tableData[10].name = typeof(item.operationDepartment) == "undefined" ? '-' : item
							// 	.operationDepartment;
							// that.tableData[11].name = typeof(item.pointJ) == "undefined" ? '-' : item.pointJ;
							// that.tableData[12].name = typeof(item.pointW) == "undefined" ? '-' : item.pointW;
							// that.tableData[13].name = typeof(item.sendTime) == "undefined" ? '-' : item.sendTime;
						}
					})

				} else {

					that.datalist1.forEach(item => {
						if (item.id == e.id) {
							that.center = item.piont;
							that.drawer = {
								title: item.name,
								drawer: true
							}
							//请求换电站信息
							that.getinfo(item.devId);
						}
					})
				}

			},
			//获取站信息
			async getinfo(stid) {
				let parm = {
					"requestId": 0,
					"stationId": stid,
					"taskId": "",
					"userId": ""
				}
				let jsonstr = await getPowerStationData(parm);
				this.bal = jsonstr.obj;
				// console.log(jsonstr);
			},
			//城市切换前
			changeBefore(e) {
				//console.log(e);
			},
			//城市切换后
			changeAfter(e) {
				//console.log("切换后", e);
				let that = this;
				that.city = e.target.bh;
				//that.seleloc();
				that.$nextTick(() => {
					that.getGeoJson();
				})
			},
			zoomstart(type) {
				that.showha = false; //是否显示区域轮廓
			},
			//zoomend缩放结束触发方法
			zoomend(type) {
				let that = this;
				//console.log("缩放结束", type);
				let na = type.target.getZoom();
				that.zoom = na;
				if (na < 15) {
					that.city = type.target.bh;
					that.seleloc();
					setTimeout(function() {
						that.getGeoJson(that.newcode);
					}, 500)
					that.bover = true;
					that.showha = true; //是否显示区域轮廓
				} else {
					//that.zoom = 13;
					let name = type.target.bh;
					that.city = name;
					const {
						lng,
						lat
					} = type.target.getCenter()
					this.centerpoint = {
						lng: lng,
						lat: lat
					}
					//that.seleloc();
					that.selectbatgps(1);
					that.bover = false;
					that.showha = false; //是否显示区域轮廓
				}
			},
			//moveend地图移动结束触发
			moveend(type) {
				//console.log("地图移动结束", type);
				let that = this;
				let na = type.target.getZoom();
				if (na >= 15) {
					const {
						lng,
						lat
					} = type.target.getCenter()
					this.centerpoint = {
						lng: lng,
						lat: lat
					}
					that.selectbatgps(1);
				} else {
					if (na >= 13 && na < 15) {
						that.city = type.target.bh;
						that.seleloc();
					}
					that.$nextTick(() => {
						that.getGeoJson(that.newcode);
					})
				}
				//that.newcode = that.getcitycode(name);
			},
			//dragend停止拖拽
			dragend(e) {
				//console.log("停止拖拽", e);
				//let that = this;
				//let name = e.target.bh;
				// that.newcode = that.getcitycode(name);
				//that.getGeoJson(that.newcode);
			},
			//圆形覆盖物的属性发生变化时触发此事件
			updateCirclePath(e) {
				//console.log(e);
			},
			over(e) {
				////console.log('移入',e);
				this.showha = true; //是否显示区域轮廓
				this.clists.forEach(item => {
					if (item.id == e.id) {
						item.oactive = true;
					}
				})

				this.havename = e.name; //显示区域的名称
			},
			leave(e) {
				////console.log('移除',e);
				this.showha = false; //是否显示区域轮廓
				this.clists.forEach(item => {
					if (item.id == e.id) {
						item.oactive = false;
					}
				})
				this.havename = e.name; //显示区域的名称
			},
			overs(e, ind) {
				////console.log('移入',e);
				if (ind == 0) {
					this.datalist.forEach(item => {
						if (item.id == e.id) {
							item.oactive = true;
						}
					})
				}
				if (ind == 1) {
					this.datalist1.forEach(item => {
						if (item.id == e.id) {
							item.oactive = true;
						}
					})
				}
			},
			leaves(e, ind) {
				////console.log('移除',e);
				if (ind == 0) {
					this.datalist.forEach(item => {
						if (item.id == e.id) {
							item.oactive = false;
						}
					})
				}
				if (ind == 1) {
					this.datalist1.forEach(item => {
						if (item.id == e.id) {
							item.oactive = false;
						}
					})
				}

			},
			//关闭抽屉
			handleClose(done) {
				done();
			},

		}

	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/mixin.scss';

	.batstatic {
		display: inline-flex;
		position: absolute;
		height: 20px;
		line-height: 20px;
		font-weight: bold;
		margin-top: 0.2rem;

		div {
			height: 3rem;
			padding-top: 0.2rem;
			color: #ffffff;
			border-radius: 0.5rem;
			margin: 0 1rem;
		}

		.batno1 {
			width: 6rem;
			text-align: center;
			background: #2ecd44;
		}

		.batno2 {
			width: 6rem;
			text-align: center;
			background: #ffa300;
		}

		.batno3 {
			width: 6rem;
			text-align: center;
			background: #3c85df;
		}

		.batno4 {
			width: 6rem;
			text-align: center;
			color: color;
			background: gray;
		}

		.batno5 {
			width: 6rem;
			text-align: center;
		}
	}

	.btns {
		margin-left: 10px;
		background-color: #e578ff;
		cursor: pointer;
		padding: 0px 15px;
		border-radius: 10px;
		font-size: 12px;
		color: #ffffff;
		display: inline-block;
		height: 30px;
		margin-top: 15px;
		line-height: 30px;
		position: absolute;
	}

	.btns:hover {
		background-color: #694fff;
	}

	.button:hover {
		opacity: .7;
	}

	.one {
		@include one
	}

	.two {
		@include two
	}

	.ten {
		@include three
	}

	.six {
		@include six
	}

	.fifteen {
		@include fifteen
	}

	.mh {
		position: fixed;
		z-index: 1000;
		width: 80rem;
		margin-left: 6rem;
		display: inline-flex;
		line-height: 41px;
		height: 60px;


		.labl {
			display: inline-flex;
			flex-direction: inherit;
			justify-content: center;
			position: fixed;
			right: 2rem;
			flex-wrap: wrap;
			width: 15rem;
			height: 16rem;

			.labls {
				margin: 1.3rem 1rem;
				padding: 1px 0.1rem;
				opacity: 0.9;
				text-align: center;
				width: 10rem;
				color: #ffffff;
				display: inline-flex;
				justify-content: center;
				flex-wrap: wrap;
				border-radius: 12px;
				box-shadow: 0 0 10px #304156;
				line-height: 0px;

				.svg-icon {
					width: 100%;
					display: inline-block;
					margin-top: 10px;
					font-size: xx-large;
				}
			}
		}

	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
		height: 50px;
	}

	.app-container {
		width: 100%;
		height: 100%;
	}

	.dras {
		width: 96%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 2%;

		h3 {
			width: 100%;
		}

		.ht {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: start;

			span {
				width: 32%;
				line-height: 2rem;
				color: #0add11;
			}

			.ts {
				color: blue
			}

			.tsg {
				color: red
			}

			.tsw {
				color: yellow
			}
		}

	}

	.box-card {
		height: 10rem !important;
		margin-bottom: 1rem !important;
	}

	.nodata {
		text-align: center;
		font-size: x-large;
		line-height: 6rem;
		min-height: 6.5rem;
	}

	.bano {
		text-align: left;
		display: inline-block;
		font-size: 20px;
		line-height: 20px;
		width: 100%;
		position: relative;
		margin-top: 0.4rem;
	}

	.datalist {
		display: inline-flex;
		width: 100%;
		height: 63px;
		line-height: 20px;
		justify-content: flex-start;


		.soc {
			width: 30%;
			margin-top: -13px;
			text-align: center;

			b {
				font-size: xx-large;
				color: #33c933;
			}
		}

		ul {
			margin: 0;
			display: inline-block;
			list-style: none;
			width: 70%;
			white-space: pre;
		}
	}

	.clearfix {
		display: inline-flex;
		width: 100%;
		// justify-content: start;
	}

	.clearfix span {
		width: 35%;
		display: inline-block;
		white-space: pre;
	}
</style>
